<template>
<transition name="fade">
  <div class="box">
    <header class="set-header">
      <router-link tag="span" :class="item.icon" :to="item.path" v-for="(item, index) of list" :key="index"></router-link>
      <span>设置中心</span>
    </header>
    <div class="setcontent">
      <ul class="setlist">
        <li v-for="(set, setindex)  of setlist" :key="setindex">
          <div class="set-icon">
            <router-link tag="a" :to="set.path" :class="set.icon"></router-link>
          </div>
          <router-link tag="span" :to="set.path">{{set.pdesc}}</router-link>
        </li>
      </ul>
    </div>
  </div>
</transition>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload } from 'mint-ui'
Vue.use(Swipe, SwipeItem, Lazyload)
export default {
  data () {
    return {
      list: [
        {
          path: '/mine',
          icon: 'iconfont icon-fanhui2'
        }
      ],
      setlist: [
        {
          path: '/set',
          pdesc: '已登录',
          icon: 'iconfont icon-trues'
        },
        {
          path: '/reglog',
          pdesc: '退出登录',
          icon: 'iconfont icon-benshubook117'
        },
        {
          path: '/log',
          pdesc: '换个账号登录',
          pprice: '29.9',
          icon: 'iconfont icon-yonghu'
        },
        {
          path: '/set',
          pdesc: '地址',
          icon: 'iconfont icon-shenghuofuwu'
        },
        {
          path: '/set',
          pdesc: '个人简介',
          icon: 'iconfont icon-wode2'
        }
      ]
    }
  },
  computed: {
  },
  created () {
  }
}
</script>

<style lang="scss">
// 头部
.set-header{
  width:3.75rem;
  height:0.42rem;
  line-height:0.42rem;
  background:#F9F9F9;
  text-align: center;
  span{
    &:nth-child(1){
     font-size:0.16rem;
     float:left;
     font-weight: 700;
     margin-left:0.15rem;
    };
    &:nth-child(2){
      display:block;
      font-size:0.14rem;
      float:left;
       margin-left:1.3rem;
    }
  }
}
// 商品展示部分
.setcontent{
  overflow-y:scroll;
  flex:1;
  .setlist{
      width:3.75rem;
      flex:1;
      background:0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width:100%;
        height:0.66rem;
        line-height:0.66rem;
        box-sizing: border-box;
        display: flex;
        border-bottom:1px solid rgb(185, 185, 185);
        background: rgb(255, 255, 255);
        .set-icon{
            width:0.35rem;
            height:0.35rem;
            line-height: 0.35rem;
            margin:0.15rem 0.2rem 0 0.2rem;
            a{
              font-size:0.28rem;
              text-decoration: none;
            }
          span{
            display: inline-block;
          }
        }
      }
    }
}

</style>
